import React, { useEffect, useState } from 'react'
import '../css/Hwj_index.css'
import { Toast, NavBar, Tag, Divider, Cell, Tabs, Sticky } from 'react-vant';
import { createFromIconfontCN } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';
import { get } from '../../../axios/request'
const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_4695075_pl7cx9w2bje.js'
)
export default function Hwj_details() {
    let navigate = useNavigate()
    let location = useLocation()
    console.log(location.state);
    let [id, setId] = useState(location.state != null ? location.state.id : '')
    let [journey, setJourney] = useState([])
    let getjourney = async () => {
        let res = await get('/hwj/getjourney', { userid: '67073b3a316728bcfadbc349', _id: id })
        console.log(res.data);
        if (res.code === 200) {
            setJourney(res.data)
        }
    }
    useEffect(() => {
        getjourney()
    }, [])
    return (
        <div id='detailsbox'>
            <Sticky>
                <div className="headerbox">
                    <NavBar
                        title="问题详情"
                        // leftText=""
                        // rightText="按钮"
                        onClickLeft={() => { navigate(-1) }}
                        onClickRight={() => Toast('按钮')}

                    />
                </div>
            </Sticky>

            {
                journey.map(i => (
                    <div key={i._id}>
                        <div className="conbox">
                            <div className='con_1'>
                                <h5>问题行程</h5>
                            </div>
                            <div className='con_2'>
                                <p>约车{i.times}</p>
                                <Tag color="rgb(227, 227, 227)" textColor="grey">已完成</Tag>
                            </div>
                            <div className="con_3">
                                <div>
                                    <IconFont name='icon-yuandian' fontSize={25} />
                                    <span>{i.start}</span>
                                </div>
                                <div>
                                    <IconFont name='icon-yuandian-green' fontSize={25} />
                                    <span>{i.end}</span>
                                </div>
                            </div>
                            <Divider style={{ borderColor: 'rgb(227, 227, 227)' }} />
                            <div className='con_1'>
                                <h5>司机绕路</h5>
                            </div>
                            <div className='con_4'>
                                <p>如司机在没有与您协商的情况下，不按导航行驶导致绕路，请点击右下方【前往处理】反馈。</p>
                            </div>
                            <Divider style={{ borderColor: 'rgb(227, 227, 227)' }} />
                            <div className='con_1'>
                                <h5>自助受理范围</h5>
                            </div>
                            <div className='con_4'>
                                <p>
                                    · 当您全程未上车，却最终要支付车费的情况下，请您返回选择“未坐车需付费”进行投诉;<br />
                                    · 账单中含有高速费、停车费、路桥费或其他费用，请返回“多收附加费”进行投诉;<br />
                                    · 如果您无责取消了订单，但系统判断您需支付取消费用，请您返回选择“被收取消费”进行投诉;
                                </p>
                            </div>
                        </div>

                        <div className='bottom_box'>
                            <button style={{ borderRadius: '50px', width: '40%', background: 'none' }}
                                onClick={() => { navigate('/hwj_service') }}
                            >
                                选择其他问题
                            </button>
                            <button
                                onClick={() => { navigate('/hwj_feedback',{state:{id:i._id}}) }}
                                style={{
                                    borderRadius: '50px',
                                    width: '40%',
                                    backgroundColor: 'rgb(255, 88, 16)',
                                    color: '#fff'
                                }}
                            >
                                前往反馈
                            </button>
                        </div>
                    </div>
                ))
            }
        </div>
    )
}
